<template>
  <div class="memberCard">
    <x-header class="header" :left-options="{showBack: showHeaderBack,preventGoBack:true}" @on-click-back="goToPage" ref="header">会员卡中心</x-header>
    <div class="topHolder"></div>
    <card>
      <div class="card-padding memberInfo" slot="content">
        <div class="left">
          <div class="avatar">
            <x-img :src="src" :offset="0"></x-img>
          </div>
          <div class="info">
            <span class="memberId">会员号：<span v-text="memberId"></span></span><br/>
            <span class="memberScore">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-huiyuanjifen"></use>
              </svg>
              积分：<span v-text="score"></span>
            </span>
          </div>
        </div>
        <div class="right">
          <a class="barcode" @click="goToPay">
            <i class="iconfont icon-erweima"></i><br/>
            <div>支付二维码</div>
          </a>
        </div>
      </div>
    </card>
    <group>
      <cell title="会员现金卡" :is-loading="loadingStatus" :value="'已绑定会员卡' + cashCardCount + '张'" is-link :link="{name:'会员卡列表',params:{type:'cashCard'}}">
        <i slot="icon" style="font-size: 1.2rem;" class="iconfont icon-membership-card_icon"></i>
      </cell>
    </group>
  </div>
</template>

<script>
  import '../../assets/iconfont/iconfont'
  import {Group, Cell, Card, XImg } from 'vux'
  import {getUserInfo,getCardCount,contextPath} from "../../api";
  import {message} from "../../common/util";

  export default {
    name:'memberCard',
    data(){
      return{
        showHeaderBack:this.GLOBAL.showHeaderBack,
        loadingStatus:false,
        cashCardCount:0,
        memberId:'',
        score:0,
        src:require('../../assets/images/defaultAvatar.jpg'),
        contextPath:contextPath
      }
    },
    components:{
      Group,
      Cell,
      Card,
      XImg
    },
    computed:{
      weixinInfo(){
        return JSON.parse(sessionStorage.getItem("user"))
      },
      localUserInfo:{
        get () {
          return this.$store.getters.getLocalUserInfo
        },
        set (value) {
          this.$store.commit('updateLocalUserInfo', value)
        }
      }
    },
    methods:{
      goToPage(){
        this.$router.push({path:'/'})
      },
      goToPay(){
        this.$router.push({path:'/payCode'})
      }
    },
    mounted(){
      this.src = this.weixinInfo.headimgurl
      let funcArray = [getCardCount()]
      if(JSON.stringify(this.localUserInfo) == '{}') funcArray.push(getUserInfo())
      Promise.all(funcArray).then((res)=>{
        console.log(res)
        for(let dataObj of res){
          if(dataObj.status == 'success') {
            if(dataObj.data && dataObj.data.MEMBER_NUMBER){
              this.localUserInfo = dataObj.data
              //this.$store.commit('updateLocalUserInfo',dataObj.data)
            }
            if(dataObj.data && dataObj.data.cashCardCount){
              this.cashCardCount = dataObj.data.cashCardCount
            }
          }else if(dataObj.status == 'error'){
            message({message: dataObj.msg, type: 'error'})
            console.log('getUserInfo or getCardCount error info:', dataObj.msg)
          }
        }
      }).then(()=>{
        let {MEMBER_NUMBER,PHONE,INTEGRAL} = this.localUserInfo
        this.memberId = MEMBER_NUMBER
        this.score = INTEGRAL
        this.loadingStatus = false
        this.$store.commit('updateLoadingStatus',{isLoading:false})
      }).catch((err)=>{console.log('getUserInfo or getCardCount catch info:',err)})
    }
  }
</script>

<style lang="scss" scoped>
  .memberCard{
    .memberInfo{
      display: flex;justify-content:space-between;
      .left{
        display: flex;
        .avatar{
          img{width:5rem;border-radius: 5rem;box-shadow: 0 0 10px 1px #e0e0e0;}
        }
        .info{
          margin: 1rem 0 0 0.5rem;line-height: 1.5rem;font-size: 0.9rem;color: #919191;
          .memberScore{
            .icon{width: 1.2em; height: 1.2em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}
          }
        }
      }
      .right{
        text-align: center;
        .barcode{
          display:block;color: #989898;
          i{font-size: 4rem;}
          div{font-size: 0.8rem;}
        }
      }
    }
  }
</style>
